<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta charset="utf-8"/>
    <title>米塔企业微云</title>
    <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
    <link href="../customize/css/iconfont.css" rel="stylesheet">
    <link href="../customize/css/content.css" rel="stylesheet">
    <style>
        #wait_List tr td:nth-child(7) {
            color: #00E3D2;
        }
    </style>
</head>
<body>
<div class="d-flex mt-3">
    <div class="border-section" style="width: 458px">
        <div class="section-title mb-3">当月设备定保状态
            <span class="title-icon"></span>
        </div>
        <div class="position-relative mb-3">
            <div class="text-center position-absolute" style="width:424px; top: 90px">
                <div class="text-bolder font-p24 text-powerOn" id="dydb">0</div>
                <div class="font-p12 text-emphasize mb-1">次</div>
                <div class="font-p12">当月需定保</div>
            </div>
            <div class="chart" id="chart_pie" style="height: 316px;"></div>
        </div>
    </div>
    <div class="flex-1 ml-3 border-section">
        <div class="d-flex justify-content-between mb-3">
            <div class="section-title">当月定保设备清单
                <span class="title-icon"></span>
            </div>
            <div class="mt-3">
                <select class="form-control" onchange="loadMaintenanceList()" id="param_id">
                    <option value="0">全部</option>
                    <option value="4">应维保</option>
                    <option value="1">已维保</option>
                    <option value="2">待维保</option>
                    <option value="3">已延期</option>
                    <option value="5">延期保养</option>
                </select>
            </div>
        </div>

        <div class="custom-scroll-y" style="height: 301px; ">
            <table class="table table-striped table-center" id="wait_List">
                <thead>
                <tr>
                    <th>设备名称</th>
                    <th>设备类型</th>
                    <th>设备编号</th>
                    <th>状态</th>
                    <th>维保周期</th>
                    <th>上次维保日期</th>
                    <th>应维保日期</th>
                    <th>下次维保日期</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </div>
</div>
<div class="mt-3 border-section">
    <div class="d-flex justify-content-between">
        <div class="section-title">维保记录
            <span class="title-icon"></span>
        </div>
        <form class="form-row align-items-center mt-3" id="param_form">
            <div class="col-auto">
                <strong class="font-p14">条件查询：</strong>
            </div>
            <div class="col-auto">
                <input class="form-control" id="name" type="text"
                       placeholder="设备名称">
            </div>
            <div class="col-auto">
                <select class="form-control" id="deviceType-select">

                </select>
            </div>
            <div class="col-auto">
                <select class="form-control" onchange="quickQuerySelector(this)">
                    <option value="3">最近3天</option>
                    <option value="7">最近一周</option>
                    <option value="30">最近一个月</option>
                    <option value="90">最近三个月</option>
                </select>
            </div>
            <div class="col-auto">
                <div class="input-group">
                    <input class="form-control" name="" type="text" id="searchTime"
                           placeholder="选择时间范围" autocomplete="off" style="min-width: 225px;">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" onclick="loadMaintenanceData()"><i
                                class="iconfont icon-dituyechaxun"></i></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="d-flex">
        <div class="position-relative mb-3">
            <div class="text-center position-absolute" style="width:442px; top: 90px">
                <div class="text-bolder font-p24 text-powerOn" id="record_count">0</div>
                <div class="font-p12 text-emphasize mb-1">次</div>
                <div class="font-p12">维保次数</div>
            </div>
            <div class="chart" id="chart_pie2" style="height: 316px; width: 442px;"></div>
        </div>
        <div class="flex-1 ml-3">
            <table class="table table-striped table-bordered table-center" id="materialList">
                <thead>
                <tr>
                    <th>#</th>
                    <th>设备名称</th>
                    <th>设备类型</th>
                    <th>设备编号</th>
                    <th>维保种类</th>
                    <th>计划时间</th>
                    <th>完成时间</th>
                    <th>实施用时</th>
                    <th>维保内容</th>
                    <th>更换材料清单</th>
                    <th>实施人</th>
                    <th>检查验证人</th>
                    <th>照片</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div id="page" class="page_div mb-3"></div>
        </div>
    </div>
</div>
<!-- 查看大图modal -->
<div class="modal fade" id="viewImageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content text-body">
            <div class="modal-header">
                <div class="section-title mb-2">查看大图
                    <span class="title-icon"></span>
                </div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body font-p14">
                <img class="img-fluid" id="img_preview_area" src="" alt="">
            </div>
        </div>
    </div>
</div>
<script src="../plugins/jquery-3.4.1.min.js"></script>
<script src="../plugins/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="../plugins/bootstrapValidator/zh_CN.js"></script>
<script src="../plugins/alert.js"></script>
<script src="../plugins/echarts.min.js"></script>
<script src="../plugins/paging.js"></script>
<script src="../plugins/laydate/laydate.js"></script>
<script src="../customize/js/iconfont.js"></script>
<script src="../customize/js/common.js"></script>
<script src="../customize/js/CommonUtils.js"></script>
<script src="../customize/js/customModalV2.js"></script>
<script src="../plugins/jquery.cookie.js"></script>
<script src="../customize/js/prdEquMaintenance.js"></script>
</body>
</html>